<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-04 09:59:42
 * @LastEditTime: 2019-09-04 15:03:27
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div class="choosePractice">
        <!-- 请选择年级 -->
        <div class="grade">
            <h2>请选择年级</h2>
            <ul @click="chooseIndex('grade',$event)">
                <li v-for="(item,index) in grade" :key="index" :data-index="index+1" :class="classItem.grade==index+1?'active':''">{{item}}</li>
            </ul>
        </div>

        <!-- 请选择科目 -->
        <div class="project">
            <h2>请选择科目</h2>
            <ul @click="chooseIndex('project',$event)">
                <li v-for="(item,index) in project" :key="index" :data-index="index+1" :class="classItem.project==index+1?'active':''">{{item}}</li>
            </ul>
        </div>

        <!-- 请选择练习模式 -->
        <div class="mode">
            <h2>请选择模式</h2>
            <ul @click="chooseIndex('mode',$event)">
                <li v-for="(item,index) in mode" :key="index" :data-index="index+1" :class="classItem.mode==index+1?'active':''"><div v-if="classItem.mode == index+1"><img src="/static/images/gou.png" alt=""></div>{{item}}</li>
            </ul>

            <button>开始答题</button>
        </div>

    </div>
</template>

<script>
export default {
    data(){
        return {
            classItem:{},
            grade:['一年级','二年级','三年级','四年级','五年级','六年级'],
            project:['语文','数学','英语'],
            mode:['练习','随机','跳转']
        }
    },
    methods:{
        chooseIndex(a,e){
            const index = e.target.dataset.index
            this.$set(this.classItem,a,index)
        }
    }
}
</script>


<style lang="less" scoped>
.choosePractice{
    background: #f0f2f7;
    >div{
        background:white;
        margin-bottom:20rpx;
        box-sizing: border-box;
        padding: 48rpx 50rpx 54rpx;
        h2{
            font-size:36rpx;
            color:#070707;
            margin-bottom: 50rpx;
            font-weight: bold;
        }
        ul{
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-content:space-between;
            li{
                display: inline-block;
                width: 185rpx;
                height:76rpx;
                text-align:center;
                line-height: 76rpx;
                letter-spacing: 4rpx;
                font-size:32rpx;
                border-radius: 10rpx;
                margin: 0rpx 8rpx;
                box-sizing: border-box;
            }
        }
    }

    .grade{
        ul{
            height: 190rpx;
            li{
                border:1px solid #001576;
                color:#001576;
                background: #edf3ff;
            }
            .active{
                color:#070707;
                border:transparent;
                background: linear-gradient(to left bottom,#e6d2f3,#a9b4fd)
            }
        }
    }

    .project{
        ul{
            li{
                border:1px solid #00b18c;
                color:#070707;
                background: #ebfcf9;
            }
            .active{
                color:#070707;
                border:transparent;
                background: linear-gradient(to left bottom,#96adff,#00b18c)
            }
        }
    }

    .mode{
        ul{
            li{
                border-radius:38rpx;
                border:1px solid #eeeeee;
                div{
                    display: inline-block;
                    width: 50rpx;
                    height: 50rpx;
                    background: white;
                    border-radius: 100%;
                    text-align: center;
                    line-height: 60rpx;
                    position:relative;
                    top:10rpx;
                    right:15rpx;
                    img{
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
            }
            .active{
                color:white;
                background: #2757ef;
            }
        }
    }

    button{
        width:452rpx;
        height: 88rpx;
        font-size: 36rpx;
        background: linear-gradient(to left,#96adff,#2757ef);
        margin-top: 154rpx;
        border-radius: 44rpx;
        color:white; 
        letter-spacing: 8rpx;
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom:40rpx;
    }
}
</style>



